<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.arrowTipBox{ background-color: #FFFFE9; border: 1px solid #FFDE8E; padding: 10px 25px 10px 10px;
 position: absolute; z-index: 100; font-size:12px;
  /*-moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; -moz-box-shadow:1px 1px 2px rgba(0,0,0,.2); -webkit-box-shadow:1px 1px 2px rgba(0,0,0,.2); box-shadow:1px 1px 2px rgba(0,0,0,.2);*/
  }
.arrowTipBox .closeIco {font-size:12px;font-family:Simsun;
text-decoration:none;text-align:center;line-height:12px;font-weight:bold;
position:absolute; top:8px; right:5px; display:block; width:12px; height:12px; overflow:hidden;color:#000; }
.arrowTipBox .closeIco:hover {background-color:#f00;color:#fff;}

.cntBox{width:100px;height:50px;}
.arrowTipBox .arrow-direction{position: absolute; }
.arrowTipBox .arrow-direction em,
.arrowTipBox .arrow-direction span{ 
height: 18px; width: 18px; font-size: 18px;line-height: 18px; 
overflow: hidden;position: absolute;font-family: Simsun;font-weight:normal;font-style:normal; }

.arrowTipBox .arrow-direction em{color: #FFDE8E;/*边框色*/}
.arrowTipBox .arrow-direction span{color: #FFFFE9;/*背景色*/}
.arrowTipBox .arrowTipBox-up{display:none;left: 50%; margin-left:-8px;top:-9px;_top:-8px;}
.arrowTipBox .arrowTipBox-up span{ top:1px}
.arrowTipBox .arrowTipBox-down{display:none;left: 50%; margin-left:-8px; bottom:8px; _bottom:6px;}
.arrowTipBox .arrowTipBox-down span{ top:-1px}
.arrowTipBox .arrowTipBox-right{display:none;top: 50%; margin-top:-8px; right:8px; _right:7px;}
.arrowTipBox .arrowTipBox-right span{ left:-1px}
.arrowTipBox .arrowTipBox-left{display:none;top: 50%; margin-top:-8px; left:-9px; }
.arrowTipBox .arrowTipBox-left span{ left:1px}

</style>
<script src="/src/core/jquery.js"></script>
<script>
jQuery(function(){
	var _html = [
	        	'<div class="arrowTipBox">',
		    		'<div class="cntBox">',
		    		'	<p>',
		    		'		<a href="#">Tip中小三角的实现!</a>',
		    		'	</p>',
		    		'</div>',
		    		'<div class="arrow-direction arrowTipBox-up">',
		    		'	<em>◆</em><span>◆</span>',
		    		'</div>',
		    		'<div class="arrow-direction arrowTipBox-down">',
		    		'	<em>◆</em><span>◆</span>',
		    		'</div>',
		    		'<div class="arrow-direction arrowTipBox-left">',
		    		'	<em>◆</em><span>◆</span>',
		    		'</div>',
		    		'<div class="arrow-direction arrowTipBox-right">',
		    		'	<em>◆</em><span>◆</span>',
		    		'</div>',
		    		'<a title="关闭" class="closeIco" href="#">&times;</a>',
	    		'</div>'
	            ].join("");
	jQuery(document.body).append('<div class="wrapperUtilBox" style="position:absolute;display:none;"></div>');
	jQuery("#trigger").click(function(){
		var t = jQuery(this);
		var offset = t.offset();
		jQuery(".wrapperUtilBox").html(_html).css({
			top: offset.top,
			left: offset.left
		}).show();
		jQuery(".arrowTipBox").css({
			top:0 + 8 + t.height(),
			left: 0
		});
		jQuery(".arrowTipBox .arrowTipBox-up").show();
		//jQuery(".arrowTipBox .arrowTipBox-down").show();
		setTimeout(function(){
			jQuery(".cntBox").html("Tip中小三角的实现!内容更新")
			
		},2000);
	});
	
});
</script>
</head>
<body>
	<div style="height:300px;"></div>
	<a id="trigger">文本</a>

</body>
</html>